<template>
	<view>
		<u-navbar title="发布需求" :border-bottom="false">
			<view slot="right" class="navbar-right" @click="$goto('/pages/demand/list')">发布记录</view>
		</u-navbar>
		<view class="toptip">
			请描述您的需求，以便有专业人才联系您并为您服务
		</view>
		
		<u-gap height="32"></u-gap>
		<view class="block" style="padding-top: 16rpx;">
			<textarea class="textarea" v-model="demand" maxlength="300" placeholder="如,我需要设计Logo" />
			<view class="tip text-right padding-bottom-xs">300字以内</view>
		</view>
		<view style="width:650rpx;height:2rpx;margin: 0 auto;background: rgba(0,0,0,0.1);"></view>
		
		<view class="block" style="padding: 0;position: relative;">
			<u-upload
				:action="$store.state.upload"
				:header="header"
				:show-progress="false"
				:form-data="{type: 'demand'}"
				:max-count="3"
				upload-text=""
				@on-success="success"
				@on-remove="remove"
				width="130">
			</u-upload>
			<view class="tip" style="position: absolute;right: 16rpx;bottom: 16rpx;">上传图片{{imgs.length}}/3</view>
		</view>
		
		
		<u-gap height="40"></u-gap>
		<l-file ref="lFile" @up-success="onSuccess"></l-file>
		<view class="block">
			<view class="row">
				<view class="left">
					上传附件
				</view>
				<view class="right" @click="onUpload">
					<image src="../../static/images/upload.png" style="width: 32rpx;height: 32rpx;"></image>
				</view>
			</view>
			
			<view class="row" v-for="(i,k) in attach" :key="k">
				<view class="left">{{'...'+i.slice(-12)}}</view>
				<image class="right" src="../../static/images/delete.png" style="width: 32rpx;height: 32rpx;" @click="delFile(k)"></image>
			</view>
		</view>
		
		<view class="block-list">
			<view class="block">
				<view class="row">
					<view class="left4">服务类别</view>
					<u-field v-model="demand_type" disabled :border-bottom="false" :label-width="0" placeholder="请选择分类" @click="fenlei=true">
					</u-field>
					<u-select v-model="fenlei" :list="fenleilist" mode="mutil-column-auto" @confirm="fenleiconfirm"></u-select>
				</view>
			</view>
			
			<view class="block">
				<view class="row">
					<view class="left4">联系手机</view>
					<u-field v-model="mobile" :border-bottom="false" :label-width="0" placeholder="请留下手机号，便于人才联系您"></u-field>
				</view>
			</view>
			
			<view class="block">
				<view class="row">
					<view class="left4">验证码</view>
					<u-field v-model="code" :border-bottom="false" :label-width="0" placeholder="请输入验证码">
						<u-tag slot="right" border-color="#FF8B56" bg-color="#F5F5F5" color="#FF8B56" :text="tips" @click="getCode"></u-tag>
					</u-field>
					<u-verification-code :seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
				</view>
			</view>
		</view>
		
		<my-btn gold style="margin: 60rpx auto;" @click="publish">发布需求</my-btn>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fenlei: false,
				fenleilist: [],
				demand_id: '',
				demand_type: '',
				ck1: '',
				ck2: '',
				mobile: '',
				demand: '',
				code: '',
				type: '',
				tips: '获取验证码',
				pay: 0,
				id: '',
				pro: '',
				header: '',
				imgs: [],
				attach: []
			};
		},
		computed: {

		},
		onLoad(opt) {
			this.pay = 1
			this.header = {
				Authorization: 'Bearer ' + this.$store.state.token
			}
			this.getList();
		},
		methods: {
			codeChange(e) {
				this.tips = e
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$u.post('/code/mobile?type=demand', {
						mobile: this.mobile
					}).then(res => {
						uni.hideLoading();
						if (res.data.code == 0) {
							this.$u.toast('验证码已发送');
							this.$refs.uCode.start();
						} else {
							this.$u.toast(res.data.msg)
						}
					})
				} else {
					this.$u.toast('稍后再试');
				}
			},
			success(data, index, lists) {
				let img = data.result.src
				this.imgs.splice(index, 1, img)
			},
			remove(index, lists) {
				this.imgs.splice(index, 1)
			},
			getList() {
				this.$u.get('/demand/choice').then(res => {
					this.fenleilist = res.data.result.type
				})
			},
			fenleiconfirm(e) {
				this.demand_id = e[0].value + '-' + e[1].value
				this.demand_type = e[0].label + '-' + e[1].label
			},
			publish() {
				let data = {
					content: this.demand,
					demand_id: this.demand_id,
					demand_type: this.demand_type,
					contact_mobile: this.mobile,
					code: this.code,
					img: this.imgs,
					attach: this.attach
				}
				
				this.$u.post('/demand/release', data).then(res => {
					if (res.data.code==0) {
						this.$msg(res.data.msg, 1000, true).then(res => {
							this.$goto('/pages/home/index', 'tab')
						})
					} else {
						this.$msg(res.data.msg, 1000, true)
					}
				})
			},
			// l-file
			onSuccess(res) {
				let name = res.fileName
				let src = res.src
				this.attach.push(src)
			},
			onUpload() {
				this.$refs.lFile.upload({
					// #ifdef APP-PLUS
					currentWebview: this.$mp.page.$getAppWebview(),
					// #endif
					url: this.$store.state.upload,
					name: 'file',
					header: this.header,
					type: 'demand_file'
				});
			},
			delFile(key) {
				this.attach.splice(key, 1)
			}
		}
	}
</script>

<style lang="scss">
	.navbar-right {
		font-size:24rpx;
		padding-right: 40rpx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(238,188,128,1);
	}
	
	page {
		background: #fff;
	}
	
	.toptip {
		width: 670rpx;
		margin: 0 auto;
		font-size:24rpx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(238,188,128,1);
		height: 40rpx;
		line-height: 40rpx;
	}
	
	.tip {
		font-size:22rpx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(140,140,140,1);
	}
	
	.block-list {
		.block {
			margin: 32rpx auto !important;
			padding-right: 0 !important;
		}
	}
	.block {
		width:670rpx;
		margin: 0 auto;
		padding: 0 24rpx;
		background:rgba(245,245,245,1);
		border-radius:8rpx;
		
		.row {
			height: 84rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		
		.left4 {
			min-width: 140rpx;
			position: relative;
			
			&::after {
				content: '';
				position: absolute;
				width: 2rpx;
				height: 24rpx;
				background: #8C8C8C;
				right: 0;
				top: 50%;
				transform: translate(0,-50%);
			}
		}
	}
	
	/deep/ .u-list-item {
		border: 1px solid rgba(151,151,151,0.4);
		overflow: visible !important;
	}
	
	/deep/ .u-add-wrap {
		padding-top: 20rpx;
	}
	
	/deep/ .u-delete-icon {
		transform: translate(50%, -50%);
	}
	
	.textarea {
		height: 200rpx;
		background: rgba(245,245,245,1);
		border-radius: 8rpx;
		padding: 0;
		font-size: 24rpx;
		box-sizing: border-box;
	}
	.item {
		height: 100rpx;
		display: flex;
		align-items: center;
		&.on {
			opacity: 0.7;
			transform: translate(1px, 1px);
		}
		&.bt {
			justify-content: space-between;
		}
		.text {
			min-width: 160rpx;
		}
		.radio {
			width: 40rpx;
			height: 40rpx;
			margin-right: 24rpx;
			background: url(../../static/images/ra0.png);
			background-size: 100% 100%;
			&.on {
				background: url(../../static/images/ra1.png);
				background-size: 100% 100%;
			}
		}
	}
	.file {
		height: 72rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>
